import {
  Button,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Theme,
  Typography
} from "@material-ui/core";
import createStyles from "@material-ui/core/styles/createStyles";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import * as React from "react";
import { AppPageProps } from "../../types/AppPageProps";
import CardHeader from "../mymedicalcard/CardHeader";

const styles = (theme: Theme) =>
  createStyles({
    root: {},
    dateOpion: {
      display: "flex",
      height: "10vh",
      alignItems: "center",
      justifyContent: "center"
    },
    table: {
      width: "100vw"
    },
    TableCell: {
      borderLeft: "1px solid rgba(224, 224, 224, 1)",
      width: "14.2vw"
    }
  });
const tableHeader = [
  "8月20",
  "8月21",
  "8月22",
  "8月23",
  "8月24",
  "8月25",
  "8月26"
];
const tableBoday = [
  ["", "孙士雄", "", "", "孙士雄", "", ""],
  ["张旭东", "", "", "", "", "张旭东", ""],
  ["", "", "攀登可", "", "", "", "攀登可"]
];

interface props extends WithStyles<typeof styles>, AppPageProps {}

class ScheduleCalendar extends React.Component<props> {
  public render() {
    const { classes } = this.props;
    return (
      <div>
        <CardHeader title={"排版日历"} diplayButton={false} />
        <div className={classes.dateOpion}>
          <Button>
            <ChevronLeft />
          </Button>
          <Typography>8月20日 - 8月27</Typography>
          <Button>
            <ChevronRight />
          </Button>
        </div>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              {tableHeader.map((value, index) => {
                return (
                  <TableCell padding={"none"} key={index}>
                    {value}
                  </TableCell>
                );
              })}
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow
              style={{ borderBottom: "1px solid rgba(224, 224, 224, 1)" }}
            >
              <TableCell colSpan={7}>上午</TableCell>
            </TableRow>
            {tableBoday.map((value, index, array) => {
              return (
                <TableRow key={index}>
                  {array[index].map((value1, index) => {
                    return (
                      <TableCell
                        className={classes.TableCell}
                        padding={"none"}
                        key={index + value1}
                      >
                        {value1}
                      </TableCell>
                    );
                  })}
                </TableRow>
              );
            })}
            <TableRow
              style={{ borderBottom: "1px solid rgba(224, 224, 224, 1)" }}
            >
              <TableCell colSpan={7}>下午</TableCell>
            </TableRow>
            {tableBoday.map((value, index, array) => {
              return (
                <TableRow key={index}>
                  {array[index].map((value1, index) => {
                    return (
                      <TableCell
                        className={classes.TableCell}
                        padding={"none"}
                        key={index + value1}
                      >
                        {value1}
                      </TableCell>
                    );
                  })}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
    );
  }
}

export default withStyles(styles)(ScheduleCalendar);
